<template>
  <view class="movie-container">
     <!-- 顶部导航栏 -->
     <view class="tab-header">
      <text class="location">南充</text>
      <text :class="['normal', {'active': isHotMovie}]" @tap="optionMovieType(true)">正在热映</text>
      <text :class="['normal', {'active': !isHotMovie}]" @tap="optionMovieType(false)">即将上映</text>
      <!-- 将文字改为图片 -->
      <view class="search-box" @tap="goToSearch">
        <image 
          class="search-icon" 
          src="/static/images/search.png"
          mode="aspectFit"
        ></image>
      </view>
    </view>

    <!-- 电影列表区域 -->
    <view class="main-content">
      <!-- 正在热映列表 -->
      <view class="movie-list" v-show="isHotMovie">
        <view class="movie-item" v-for="(item, index) in movieList" :key="index">
          <image 
            class="movie-poster"
            :src="getPoster(item.poster)"
            mode="aspectFill"
            @tap="goToDetail(item.movie_id)"
          />
          <view class="info">
            <view class="name" @tap="goToDetail(item.movie_id)">{{item.movie_name}}</view>
            <view class="desc-info" v-if="item.score">
              评分：<text class="number">{{item.score.toFixed(1)}}</text>分
            </view>
            <view class="desc-info" v-else>暂无评分</view>
            <view class="desc-info actor-info">主演：{{item.actor}}</view>
          </view>
          <button 
            class="buy-btn" 
            @tap="goToSelectCinema(item.movie_id)"
          >购票</button>
        </view>
      </view>

      <!-- 即将上映列表 -->
      <view class="movie-list" v-show="!isHotMovie">
        <view class="movie-item" v-for="(item, index) in notShowMovieList" :key="index">
          <image 
            class="movie-poster"
            :src="getPoster(item.poster)"
            mode="aspectFill"
            @tap="goToDetail(item.movie_id)"
          />
          <view class="info">
            <view class="name" @tap="goToDetail(item.movie_id)">{{item.movie_name}}</view>
            <view class="desc-info">
              想看：<text class="number">{{item.wish_num}}</text>人想看
            </view>
            <view class="desc-info actor-info">主演：{{item.actor}}</view>
          </view>
          <button 
            class="buy-btn" 
            @tap="goToSelectCinema(item.movie_id)"
          >预售</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isHotMovie: true,
      movieList: [],
      notShowMovieList: []
    }
  },
  onLoad() {
    // 监听从首页发来的事件
    uni.$on('updateMovieList', (data) => {
      // 如果接收到的是 0，则显示"即将上映"，否则显示"正在热映"
      this.isHotMovie = data.type !== 0;
    });
    this.loadMovieInfo();
  },
  onUnload() {
    // 在页面销毁时，移除事件监听，防止内存泄漏
    uni.$off('updateMovieList');
  },
  methods: {
    optionMovieType(flag) {
      this.isHotMovie = flag
    },
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    goToDetail(movieId) {
      // 在跳转前，先确保电影ID是有效的
      if (!movieId) {
        uni.showToast({
          title: '无效的电影ID',
          icon: 'none'
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/movie-detail/movie-detail?movie_id=${movieId}`
      })
    },
    goToSelectCinema(movieId) {
      uni.navigateTo({
        url: `/pages/select-cinema/select-cinema?movie_id=${movieId}`
      })
    },
    getPoster(path) {
      return 'http://localhost:9090' + path
    },
    loadMovieInfo() {
  console.log('开始加载电影数据')
  uni.request({
    url: 'http://localhost:9090/getMoviesForApp',
    method: 'GET',
    success: (res) => {
      console.log('电影数据响应:', res.data)
      if (res.data.code === 1) {
        // 直接使用后端分类好的数据
        this.movieList = res.data.nowShowingMovies.map(movie => ({
          movie_id: movie.id,
          movie_name: movie.name,
          poster: movie.poster,
          score: movie.score,
          actor: movie.actor
        }));
        
        this.notShowMovieList = res.data.comingSoonMovies.map(movie => ({
          movie_id: movie.id,
          movie_name: movie.name,
          poster: movie.poster,
          wish_num: movie.wishNum || 0,
          actor: movie.actor
        }));
        
        console.log('正在热映电影:', this.movieList.length)
        console.log('即将上映电影:', this.notShowMovieList.length)
      } else {
        console.log('获取电影列表失败:', res.data.msg)
        uni.showToast({
          title: '获取电影列表失败',
          icon: 'none'
        })
      }
    },
    fail: (err) => {
      console.log('请求失败:', err)
      uni.showToast({
        title: '网络请求失败',
        icon: 'none'
      })
    }
  })
}
  }
}
</script>

<style>
.movie-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.tab-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  width: 100%;
  font-size: 36rpx;
  background-color: rgba(3, 3, 3, 0.8);
  color: white;
  position: fixed;
  top: 0;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
}

.location {
  font-size: 32rpx;
  color: #fff;
  padding: 0 10rpx;
}

.normal {
  opacity: 0.6;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  padding: 0 20rpx;
  transition: all 0.3s;
}

.active {
  color: #fff;
  border-bottom: 4rpx solid #fff;
  opacity: 1;
  font-weight: bold;
}

/* 添加搜索图标样式 */
.search-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
}

.search-icon {
  width: 48rpx;
  height: 48rpx;
}

.main-content {
  padding-top: 140rpx;
  padding-bottom: 20rpx;
}

.movie-list {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 0 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.movie-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.movie-poster {
  width: 180rpx;
  height: 240rpx;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #666;
  min-width: 0;
  margin-right: 20rpx;
}

.name {
  font-weight: bold;
  font-size: 34rpx;
  padding-bottom: 20rpx;
  color: #333;
}

.desc-info {
  padding-bottom: 16rpx;
  line-height: 1.4;
}

.number {
  color: #ffb400;
  font-weight: bold;
  font-size: 30rpx;
}

.actor-info {
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
}

.buy-btn {
  min-width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #ff4d4f;
  border-radius: 35rpx;
  margin: 0;
  padding: 0 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 8rpx rgba(255, 77, 79, 0.2);
  transition: all 0.3s;
  flex-shrink: 0;
  align-self: center;
}

.buy-btn:active {
  transform: scale(0.96);
  background-color: #ff3133;
}
</style>